{% extends 'web_base.html' %}
{% load staticfiles %}

{% block title %}
    用户信息
{% endblock %}
{% block css_js %}
    <link rel="stylesheet" href={% static "css/user.css" %}>
{% endblock %}


{% block web_body %}
    <div class="container">
        <div class="user-info">
            <div class="headImg">
                <img src={% static "media/touxiang.jpg" %} alt="">
            </div>
            <p class="alias">{{ username }}</p>

        </div>
        <ul id="myTab" class="nav nav-tabs">

            <li class="active">
                <a href="#orders" data-toggle="tab">
                    我的订单
                </a>
            </li>
            <li>
                <a href="#recently" data-toggle="tab">
                    最近浏览
                </a>
            </li>

        </ul>
        <!-- 每个tab页对应的内容 -->
        <div id="myTabContent" class="tab-content">

            <div class="tab-pane fade in active" id="orders">

                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>订单号</th>
                        <th>创建时间</th>
                        <th>商品概述</th>
                        <th>支付状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% csrf_token %}
                    {% for order in orders %}
                        <tr>
                            <td>{{ order.order_id }}</td>
                            <td>{{ order.create_time }}</td>
                            <td>{% for goodes in order.order_goodes %}
                                {{ goodes.goodes.name }}
                            {% endfor %}
                            </td>

                            <td class="bt" status="{{ order.order_status }}" order_id="{{ order.order_id }}"><a
                                    href="javascript:void(0)">{{ order.order_status_name }}</a></td>
                        </tr>
                    {% endfor %}


                    </tbody>
                </table>

            </div>
            <div class="tab-pane fade" id="recently">
                <div class="row">
                    {% for re in res %}
                        <div class="col-sm-2 col-lg-2">
                            <div class="thumbnail">
                                <a href="{% url 'goods:goods_detail' re.id %}"> <img src="{{ re.image.url }}"
                                                                                     alt=""></a>
                                <h5>{{ re.name }}</h5>
                                <p>{{ re.desc }}</p>
                            </div>

                        </div>

                    {% empty %}
                        无
                    {% endfor %}


                </div>
            </div>
        </div>

    </div>

{% endblock %}
{% block end_js %}
    <script>
        if ('{{ err }}' != '') {
            alert('{{ err }}')
        }
        var btn = $('.bt');

        btn.click(function () {

            order_status = $(this).attr('status');
            order_id = $(this).attr('order_id');


            if (order_status == 1) {
                csrf = $('input[name="csrfmiddlewaretoken"]').val();

                params = {'csrfmiddlewaretoken': csrf, 'order_id': order_id, 'order_status': order_status}

                $.post('/computer/order/orderpay', params, function (data) {
                    if (data.res == 3) {
                        window.open(data.payurl)
                        $.post('/computer/order/pay_check', params, function (data) {
                            if (data.res == 3) {
                                alert('支付成功')
                                location.reload()
                            } else {
                                alert(data.errmsg)
                            }
                        })
                    } else {
                        alert(data.errmsg)
                    }
                })

            } else if (order_status == 4) {
                window.open('{% url 'orders:comment' '' %}'+order_id);
            }
        })

    </script>
{% endblock %}

